<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 20px;
            background-color: rgb(222, 219, 219);
            font-size: 12px;
            text-align: center;
        }
        .nav1{
            float: left;
            padding-left: 50px;
        }
        .nav2{
            float: right;
            padding-right: 50px; 
        }
        .div11{
            position: absolute;
            left: 100px;
            top: 160px;
            background-color: #bebcbc;
            width: 250px;
            height: 350px;
            border-radius: 10px;
            word-spacing: 5px;
        }
        .div12{
            float: left;
            left: 100px;
        }
        .div13{
            float: left;
            text-align: center;
            position: relative;
        }
        .div14{
            float: left;
            padding-left: 100px;
        }
        .div1{
        top: 150px;
        margin: auto;
        width: 1540px;
        height: 470px;
        background-color: rgb(222, 219, 219);
        position: relative;
        }
        li{
        background-color: #f8f8f8d4;
        position: absolute;
        height: 400px;
        width: 230px;
        left: 20px;
        top: 30px;
        list-style-type: none;
        line-height: 2em;
        }
        .a1{
        position: absolute;
        height: 50px;
        width: 1000px;
        background-color: #f8f8f8d4;
        left: 270px;
        top: 30px;
        }
a{
    text-decoration: none;
    color: black;
    margin-left: 20px;
}
a:hover{
    color: red;
}
.div2{
    position: absolute;
    height: 330px;
    width: 220px;
    background-color: #f8f8f8d4;
    left: 270px;
    top: 100px;
}
.div2 img{
    height: 330px;
    width: 220px;
}
.div3{
    position: absolute;
    height: 150px;
    width: 250px;
    background-color: #f8f8f8d4;
    left: 510px;
    top: 100px;
}
.div3 img{
    height: 100px;
    width: 100px;
}
.div4{
    position: absolute;
    height: 150px;
    width: 250px;
    background-color: #f8f8f8d4;
    left: 510px;
    top: 280px;
}
.div4 img{
    height: 100px;
    width: 100px;
}
.div5{
    position: absolute;
    height: 150px;
    width: 250px;
    background-color: #f8f8f8d4;
    left: 780px;
    top: 100px;
}
.div5 img{
    height: 100px;
    width: 100px;
}
.div6{
    position: absolute;
    height: 150px;
    width: 250px;
    background-color: #f8f8f8d4;
    left: 780px;
    top: 280px;
}
.div6 img{
    height: 100px;
    width: 100px;
}
.div7{
    position: absolute;
    height: 330px;
    width: 220px;
    background-color: #f8f8f8d4;
    left: 1050px;
    top: 100px;
}
.div7 img{
    height: 150px;
    width: 150px;
}
.div8{
    background-color: #f8f8f8d4;
    position: absolute;
    height: 400px;
    width: 230px;
    left: 1290px;
    top: 30px;
}
.div8 img{
    border-radius: 50%;
    width: 70px;
    height: 70px;
    padding: 20px;
}
        .div9{
            width: 100%;
            height: 100px;
            position: relative;
            background-color: rgb(222, 219, 219);
            position: fixed;
            z-index: 99;
}
        .div9 img{
        height: 50px;
        width: 150px;
        padding-left: 200px;
        padding-top: 20px;
}
nav{
    top: 200px;
    margin: auto;
    width: 1540px;
    height: 470px;
    background-color: rgb(81, 81, 80);
}
        .div10{
            width: 50px;
            height: 200px;
            position: absolute;
            background-color: rgb(177, 177, 176);
            right: 0;
            left: auto;
            top: 400px;
            position: fixed;
        } 
    </style>
</head>
<body>
    <header>
    <div class="nav1">
        <span>中国大陆版 - 山西</span>
        <span>| 名称</span>
        <span>| 切换至企业版</span>
    </div>
    <div class="nav2">
        <span>购物车 |</span>
        <span>我的订单</span>
        <span>我的京东</span>
        <span>企业采购</span>
        <span>商家服务</span>
        <span>网站导航</span>
        <span>手机京东</span>
        <span>网站无障碍</span>
    </div>
    </header>
    <div class="div9">
        <img src="../image/logo.ico" alt="">
        <input type="text" style="width: 600px;height: 40px;border-radius:10px ;"><button style="width: 50px;height: 40px;border-radius: 10px;background-color: red;">搜索</button>
        <img src="../image/免费抽.gif" width="50%" alt="">
    </div>
    <div class="div1">
        <div>
        <li>
            家用电器<br>
            手机/运营商/数码<br>
            电脑/办公/文具用品<br>
            家居/家具/家装/厨具<br>
            男装/女装/童装/内衣<br>
            美妆/个护清洁/宠物<br>
            女鞋/箱包/钟表珠宝<br>
            男鞋/运动/户外<br>
            房产/汽车/汽车用品<br>
            母婴/玩具乐器<br>
            食品/酒类生鲜/特产
        </li>
        </div>
        <div class="a1">
            <a href="">出口转内</a>
            <a href="">早十好价</a>
            <a href="./ls2.html" target="_blank">新品</a>
            <a href="./ls3.html" target="_blank">排行榜</a>
            <a href="">京东拍卖</a>
            <a href="">京东企业购</a>
            <a href="">服饰美妆</a>
            <a href="">京东超市</a>
            <a href="">拍拍二手</a>
            <a href="">家电家具</a>
        </div>
        <div class="div2">
            <img src="../image/jingdong11.png" alt="">
        </div>
        <div class="div3">
            <p>国家补贴*百亿补贴</p>
            <img src="../image/jingdong6.png" alt="">
            <img src="../image/jingdong6.png" alt=""><br>
            <strong>&yen;19.9</strong>
        </div>
        <div class="div4">
            <p>国家补贴*百亿补贴</p>
            <img src="../image/jingdong6.png" alt="">
            <img src="../image/jingdong6.png" alt=""><br>
            <strong>&yen;19.9</strong>
        </div>
        <div class="div5">
            <p>国家补贴*百亿补贴</p>
            <img src="../image/jingdong6.png" alt="">
            <img src="../image/jingdong6.png" alt=""><br>
            <strong>&yen;19.9</strong>
        </div>
        <div class="div6">
            <p>国家补贴*百亿补贴</p>
            <img src="../image/jingdong6.png" alt="">
            <img src="../image/jingdong6.png" alt=""><br>
            <strong>&yen;19.9</strong>
        </div>
        <div class="div7">
            <p>国家补贴*百亿补贴</p>
            <img src="../image/jingdong6.png" alt=""><br>
            
            <img src="../image/jingdong6.png" alt=""><br>
            
        </div>
        <div class="div8">
            <img src="../image/头像.png" alt="">
            <a href="">注册|登录</a>
        </div>
    </div>
    <div>
            <nav></nav>
            <nav></nav>
            <nav></nav>
            <nav></nav>
    </div>
    <div class="div10">
            <img src="../image/热狗.png" alt="">
            <p>零食</p>
            <img src="../image/爱心.png" alt="">
            <p>爱心</p>
    </div>
</body>
</html>